<template>
    <!--排课编辑-->
    <div>
        <Modal
                v-model="modal"
                :title="modify.teacherName"
                :closable="false"
                @on-cancel="cancel"
                @on-ok="confirm"
                :mask-closable="false"
                width="1000">
            <Table border :columns="columns" :data="data">
                <template slot-scope="{ row }" slot="action">
                    <Button type="primary" size="small" @click="edit(row)" style="margin-right: 20px">编辑</Button>
                    <Button type="error" size="small" @click="remove(row)">删除</Button>
                </template>
            </Table>
        </Modal>
        <calender-add-form :modal="editModal" :modify="editModify"></calender-add-form>
    </div>
</template>

<script>
    import CalenderAddForm from './CalendarAddForm'

    export default {
        name: "TeachingEdit",
        props: ['modal', 'modify'],
        data() {
            return {
                editModal: false,
                editModify: '',
                columns: [
                    {
                        title: '日期',
                        key: 'day'
                    }, {
                        title: '时间',
                        key: 'time'
                    }, {
                        title: '教室',
                        key: 'room'
                    }, {
                        title: '年级',
                        key: 'grade'
                    }, {
                        title: '学生',
                        key: 'students'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 180,
                        align: 'center'
                    }
                ],
                data: []
            }
        },
        watch: {
            //modify改变时
            modify: function () {
                this.search();
            }
        },
        components: {
            CalenderAddForm,
        },
        methods: {
            edit(row) {
                this.editModal = true
                this.editModify = row
            },
            getTable() {
                this.search()
            },
            search() {
                this.$api.teachingSearch(this.modify).then(res => {
                    this.data = res;
                })
            },
            confirm() {
                this.$parent.getTable()
                this.cancel();
            },
            cancel() {
                this.editModal = false
                this.$parent.cancel
            },
            //删除
            remove(row) {
                this.$Modal.confirm({
                    title: '确认删除 ' + row.time + " 课程吗？",
                    onOk: () => {
                        this.$api.teachingRemove(row.id)
                            .then(() => {
                                this.$Message.success('删除成功')
                                this.search();
                                this.$parent.getTable()
                            })
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>
